<template>
    <section>
        <v-calendar slot="reference"
                    nav-visibility="hidden"
                    :columns="$screens({ lg: 3,laptop: 6 }, 1)"
                    :rows="4"
                    :from-date="new Date(new Date().getFullYear(),0,  )" is-expanded
                    :attributes="attributes"
                    @dayclick="dayClick"
                    @daymouseenter="dayMouseenter"
                    @daymouseleave="dayMouseover"
                    @update:frompage="leftClick"
                    @update:topage="rightClick"
        >
        </v-calendar>
        <!-- 添加和编辑弹出框 -->
        <AddAndEdit
                v-model="addAndEditValue"
                @on-show-change="addAndEditDone"
        />
        <Publish
                v-model="publishValue"
                @on-show-change="publishDone"
        />
    </section>
</template>
<style>
</style>
<script>
    import AddAndEdit from "./AddAndEdit";
    import Ops from "./ops.vue";
    import Publish from "./publish";

    export default {
        components: {
            AddAndEdit,
            Publish
        },
        data() {
            return {
                attributes: [],
                tipShow: false,
                messageObj: '',
                tipContent: '',
                searchParams: {
                    organizationIds: [],
                    key: ""
                },
                year: '',
                defaultProps: {
                    children: "sub",
                    value: "id",
                    label: "name"
                },
                organizations: [],
                grantValue: {
                    id: 0,
                    show: false
                },
                resetValue: {
                    id: 0,
                    show: false
                },
                addAndEditValue: {
                    show: false,
                    template: {id: 0}
                },
                publishValue: {
                    show: false,
                    template: {id: 0}
                },
                powerInfo: {
                    selectedIds: [],
                    userId: 0
                },
                powerShow: false,
                permissions: [],
                roles: [],
                columns: [
                    {label: "ID", width: "55", align: "center", prop: "id"},
                    {
                        label: "名称",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "name"
                    },
                    {
                        label: "分类",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "templateSortName",
                        propsHandler: function ({row, col, column}) {
                            row.templateSortName = row.templateSort
                                ? row.templateSort.name
                                : "";
                            return {row, col, column};
                        }
                    },
                    {
                        label: "类型",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "taskTypeName",
                        propsHandler: function ({row, col, column}) {
                            row.taskTypeName = row.taskType
                                ? row.taskType.name
                                : "暂无";
                            return {row, col, column};
                        }
                    },
                    {
                        label: "开始时间",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "startTime"
                    },
                    {
                        label: "结束时间",
                        "show-overflow-tooltip": true,
                        align: "center",
                        prop: "endTime"
                    },
                    {
                        label: "操作",
                        align: "center",
                        component: Ops,
                        listeners: {
                            deleteDone: this.loadData,
                            // resetShow: this.handleReset,
                            editRow: this.handleEdit,
                            publishRow: this.publish
                            // roleShow: this.handleRole,
                            // permissionShow: this.handlePermission
                        }
                    }
                ],
                applications: [],
                pager: {
                    dataList: [],
                    pager: {
                        pageCount: 0,
                        pageNumber: 1,
                        pageSize: 15,
                        recordCount: 0
                    },
                    paras: {
                        key: ""
                    }
                }
            };
        },
        methods: {
            dayMouseover(val) {
                if (val.attributes && val.attributes.length > 0) {
                    this.messageObj ? this.messageObj.close() : '';
                }
            },
            dayMouseenter(val) {
                if (val.attributes && val.attributes.length > 0) {
                    this.messageObj = this.$message({
                        showClose: false,
                        duration: 0,
                        center: false,
                        type: 'success',
                        dangerouslyUseHTMLString: true,
                        message: `<span>名称：${val.attributes[0].customData.name}<br/>描述：${val.attributes[0].customData.desc}</span>`
                    });
                }
            },
            dayClick(val) {
                if (val.attributes && val.attributes.length > 0) {
                    //this.publishValue = {show: true, template: val.attributes[0].customData};
                    if (this.messageObj) {
                        this.messageObj.close();
                    }
                    this.$router.push({path: "/template/detail", query: {templateId: val.attributes[0].customData.id}})
                }
            },
            leftClick(val) {
                this.year = val.year;
                this.loadData();

            },
            rightClick(val) {
                this.year = val.year;
                this.loadData();
            },
            doSearch() {
                window.setTimeout(() => {
                    this.$api.template.search(
                        this.searchParams.key,
                        this.pager.pager.pageNumber,
                        result => {
                            this.pager = result.pager;
                        }
                    );
                }, 100);
            },
            changePage() {
                if (this.searchParams.key) {
                    this.doSearch();
                } else {
                    this.loadData();
                }
            },
            handleEdit(row) {
                this.addAndEditValue = {show: true, template: {id: row.id}};
            },
            publish(row) {
                this.publishValue = {show: true, template: this.$clone(row)};
            },
            publishDone(data) {
                this.publishValue.show = data.visible;
                this.changePage();
            },
            addAndEditDone(data) {
                this.addAndEditValue.show = data.visible;
                this.changePage();
            },
            loadData() {
                if (!this.year) {
                    this.year = new Date().getFullYear();
                }
                this.$api.template.fixedList(this.year, result => {
                    let color = ["green", 'indigo', "pink", 'purple', 'yellow', 'blue','red','orange','teal','gray'];
                    let index = 0;
                    this.attributes = result.templates.map(item => {
                        let startTime = new Date(item.startTime);
                        let endTime = new Date(item.endTime);
                        index++;
                        if (index > color.length) {
                            index = 1;
                        }
                        return {
                            key: item.id,
                            highlight: color[index - 1],
                            customData: item,
                            // popover: {
                            //    label: `${item.name}`
                            // },
                            dates: [
                                {
                                    start: new Date(startTime.getFullYear(), startTime.getMonth(), startTime.getDate()),
                                    end: new Date(endTime.getFullYear(), endTime.getMonth(), endTime.getDate())
                                },
                            ],
                        }
                    })
                });
            },
            loadTree() {
                // this.$api.organization.tree(0, false, result => {
                //   this.organizations = result.tree || [];
                // });
            },
            loadApplications() {
                this.$api.application.all(result => {
                    this.applications = result.applications;
                });
            }
        },
        created() {
            this.loadData();
        },
        watch: {
            searchParams: {
                handler() {
                    if (this.searchParams.organizationIds) {
                        this.searchParams.organizationId = this.searchParams.organizationIds[
                        this.searchParams.organizationIds.length - 1
                            ];
                    } else {
                        this.searchParams.organizationId = null;
                    }
                },
                immediate: true,
                deep: true
            }
        }
    };
</script>